Page({
  width: 0, // 窗口宽度
  height: 0, // 窗口高度
  timer: null,

  data: {
  },

  onLoad: function () {
    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        // console.log(res)
        // 获取窗口宽高
        this.width = res.windowWidth
        this.height = res.windowHeight
      }
    })

  },
  onReady: function () {
    var ctx = wx.createCanvasContext('myCanvas', this);
    const D6 = 6 * Math.PI / 180
    const D30 = 30 * Math.PI / 180
    const D90 = 90 * Math.PI / 180
    var width = this.width, height = this.height
    var that = this
    // 外盘半径
    var radius = width / 2 - 30
    draw()
    this.timer = setInterval(draw, 1000)
    function draw() {
      // 坐标轴原点
      ctx.translate(width / 2, height / 3)
      // 表盘
      drawClock(ctx, radius)
      // 指针
      drawHand(ctx, radius)
      ctx.draw()
      that.getTimeStr();
    }
    function drawClock(ctx, radius) {
      // 大圆
      ctx.setLineWidth(2);
      ctx.beginPath()
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, true);
      ctx.stroke()
      // 中心圆
      ctx.setLineWidth(1);
      ctx.beginPath()
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true);
      ctx.stroke()
      // 大刻度线
      ctx.setLineWidth(5);
      for (let i = 0; i < 12; i++) {
        ctx.rotate(D30)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 15, 0)
        ctx.stroke()
      }
      // 小刻度线
      ctx.setLineWidth(1);
      for (let i = 0; i < 60; i++) {
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0)
        ctx.stroke()
      }
      // 绘制文本
      ctx.setFontSize(20)         // 字号
      ctx.textBaseline = 'middle' // 文本上下居中

      // 文本距离时钟中心点半径
      var r = radius - 30

      for (let i = 1; i <= 12; ++i) {
        // 利用三角函数计算文本坐标
        var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if (i > 10) { // 调整 11 和 12 的位置
          // 在画布上绘制文本 fillText(文本, 左上角x坐标, 左上角y坐标)
          ctx.fillText(i, x - 12, y)
        } else {
          ctx.fillText(i, x - 6, y)
        }
      }
    }
    function drawHand(ctx, radius) {
      var t = new Date()     // 获取当前时间
      var h = t.getHours()   // 小时
      var m = t.getMinutes() // 分
      var s = t.getSeconds() // 秒
      h = h > 12 ? h - 12 : h // 将24小时制转化为12小时制

      // 时间从3点开始，逆时针旋转90度，指向12点
      ctx.rotate(-D90)

      // 绘制时针
      ctx.save() // 记录旋转状态
      ctx.rotate(D30 * (h + m / 60 + s / 3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0) // 线条起点（针尾留出20px）
      ctx.lineTo(radius / 2.6, 0) // 线条长度
      ctx.stroke()
      ctx.restore() // 恢复旋转状态，避免旋转叠加

      // 绘制分针
      ctx.save()
      ctx.rotate(D6 * (m + s / 60))
      ctx.setLineWidth(4)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1.8, 0)
      ctx.stroke()
      ctx.restore()

      // 绘制秒针
      ctx.save()
      ctx.rotate(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1.6, 0)
      ctx.stroke()
      ctx.restore()
    }
  },

  getTimeStr: function () {
    let that = this;
    let fullTime = new Date();
    let year = fullTime.getFullYear();//年
    let month = fullTime.getMonth();//月
    let date = fullTime.getDate();//日
    let endTime = new Date(year, month, date, 23, 59, 61);//获取未来结束的时间
    let startTime = new Date()
    let ms = parseInt((endTime - startTime) / 1000); //得到毫秒，并取整
    let s = parseInt(ms % 60);//秒
    let m = parseInt((ms / 60) % 60); //分
    let h = parseInt((ms / 3600) % 24);//小时
    //let d = parseInt((ms / 3600) / 24);//天
    s < 10 ? s = "0" + s : s;
    m < 10 ? m = "0" + m : m;
    h < 10 ? h = "0" + h : h;
    //d<10? d="0"+d:d;
    let residueTime = h + " : " + m + " : " + s;

    that.setData({ residueTime: residueTime })
  },

  beforeDestroy: function () {
    clearInterval(this.timeRunner);
  },

  onShareAppMessage: function () {
    return {
      title: '时间就是金钱，时间就是生命。'
    }
  }
})